<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品海报生成示例1</title>
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet"
        crossorigin="anonymous">

    <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
       <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../dist/poster.css">
</head>

<body>
    <div class="container detail-container">
        <div class="detail-header-box">
            <div class="detail-topic-img" id="goodsImages">
                <div id="imageCarousel" class="carousel slide">
                    <!-- 轮播（Carousel）指标 -->
                    <ol class="carousel-indicators">
                        <li data-target="#imageCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#imageCarousel" data-slide-to="1"></li>
                        <li data-target="#imageCarousel" data-slide-to="2"></li>
                    </ol>
                    <!-- 轮播（Carousel）项目 -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="../imgs/goodspic01.jpg" alt="Apple iPhone 11 (A2223) 128GB 白色"
                                crossorigin="anonymous">
                        </div>
                        <div class="item">
                            <img src="../imgs/goodspic02.jpg" alt="Apple iPhone 11 (A2223) 128GB 白色"
                                crossorigin="anonymous">
                        </div>
                        <div class="item">
                            <img src="../imgs/goodspic03.jpg" alt="Apple iPhone 11 (A2223) 128GB 白色"
                                crossorigin="anonymous">
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div style="width: 100%; position: absolute; bottom: 10px; text-align: center;">
        <button type="button" class="btn btn-warning generate-poster" id="clickBtn">生成海报</button>
    </div>

    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js" crossorigin="anonymous"></script>
    <!-- 包括所有已编译的插件 -->
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js" crossorigin="anonymous"></script>
    <script src="../lib/qrcode/qrcode.js"></script>
    <script src="../dist/poster.js"></script>
    <script>
        /*
        var vConsole = new VConsole();
        $('#imageCarousel').carousel({
            interval: 2000
            , pause: 'hover'
        });
        */

        var setting = {
            // 海报背景图
			bgImgUrl: '../imgs/poster-bg.jpg',
            //bgImgUrl: 'http://tvplaza.oss-cn-qingdao.aliyuncs.com/images/9b/c9/da/aef2f3ba89d3c2d2651e295012d731cce6bcbc04.png',// 跨域背景图
            // 商品主图
			imgUrl: '../imgs/goodspic01.jpg',
            //imgUrl: 'http://cdn.tvplaza.cn/images/01/90/c6/ae0bc68f0900186e4ab92bc31b571e00bfbd3530.jpg_l.jpg',// 跨域商品图
            // 商品标题
            title: 'Apple iPhone 11 (A2223) 64GB 黑色 移动联通电信4G手机 双卡双待',
            // 二维码链接
            qrCodeUrl: '扫我呀',//window.location.href,
            // 商品卖价
            price: '￥2699.00',
            // 商品市场价
            mktPrice: '￥3000.00',
            // 有效期文字
            validText: '有效期：2019-09-04-2019-12-04',
        };
        const Poster = $.Poster.init(setting);
        $(document).on('click', '.generate-poster', function () {
            Poster.drawPoster();
        });
    </script>
</body>

</html>